<template>
	<div class="list">
		<ul>
			<li class="list_box" v-items v-for="(v, i) in data" :key="i" @click="list(i)">
				<img :src="v.imgsrc" />
			</li>
		</ul>
	</div>
</template>

<script>
export default {
	props: {
		data: {
			type: Array,
			required: true
		}
	},
	mounted() {
		// let el = document.getElementsByClassName("list_box")[0];
		// this.$service.move(el); //vue-epg封装的移动焦点的方法
	},
	methods: {
		left() {
			this.$service.move("left");
		},
		right() {
			this.$service.move("right");
		},
		up() {
			this.$service.move("up");
			this.$service.pointer.$el.scrollIntoView(true);
		},
		down() {
			this.$service.move("down");
			this.$service.pointer.$el.scrollIntoView(true);
		},
		list(i) {
			console.log(i);
		}
	}
};
</script>

<style scoped>
.focus {
	border: 5px solid yellow;
	transform: scale(1.1);
	border-radius: 10px;
	box-shadow: 0px 0px 6px 2px #ffff00;
	box-sizing: border-box;
}
.list li {
	list-style: none;
	float: left;
}
.list_box {
	width: 200px;
	height: 300px;
	background-color: tomato;
	margin: 30px;
}
.list_box img {
	width: 100%;
	height: 100%;
}
</style>
